<template>
	<view>
		<uNavbar title="收货地址"></uNavbar>
		<view class="empty"></view>

		<view class="user_address">
			<view class="address_box lineb flex_dq">
				<text>收货人</text>
				<input type="text" v-model.trim="name" placeholder="请填写收货人姓名" />
			</view>
			<view class="address_box lineb flex_dq">
				<text>手机号</text>
				<input type="phone" v-model.trim="phone" placeholder="请填写收货人手机号" />
			</view>
			<view class="address_box lineb flex_dq"  @click="openAddress">
				<text>省市区</text>
				<view class="ssq flex_ld">
					<text>{{addressAll}}</text>
					<!-- <input type="district" readonly v-model.trim="addressAll" placeholder="省市区县、乡镇等" /> -->
					<uni-icons style="margin-right: 20rpx;" type="right" color="#A6A5AF"></uni-icons>
				</view>
			</view>
			<view class="address_box lineb flex_dq">
				<text>详细地址</text>
				<input type="text" v-model.trim="detailed" placeholder="街道、楼牌号等" />
			</view>
			<!-- <view class="address_box  flex_dq">
				<text>详细地址</text>
				<u--textarea v-model="textarea" placeholder="请输入内容"  count   ></u--textarea>
			</view> -->
		</view>
		<view class="user_detail">
			<view class="user_detail_l lineb flex_dq">
				<text>标签</text>
				<view class="labels flex_dq">
					<text :class="item.id ==lableId?'active1':''  " v-for="(item,index) in labelsList" :key="index"
						@click="changeLableId(item)">{{item.name}}</text>
				</view>
			</view>
<!-- 			<view class="defaults flex_ld">
				<view class="defaults_box flex_Z">
					<text class="f30 c3">设为默认地址</text>
					<text class="f28 c9">提醒:每次下单会默认推荐使用该地址</text>
				</view>
				<u-switch v-model="defaultAddress" activeColor="#A68A64" @change="openChange"></u-switch>
			</view> -->
		</view>
		<!-- 收货地址组件 -->
		<atAddress ref="scroll"   @change='chooseSuccess'></atAddress>

		<view class="btns flex_c" @click="isComplete"><text>保存</text></view>

	</view>
</template>

<script>
	import {
		saveAddress,
	} from "../../api/shopp.js";
	
	export default {
		data() {
			return {
				id:'',
				lableId: 0,
				name: '',
				phone: '',
				detailed: '',
				addressAll:'省市区县、乡镇等',
				province_id:'',//省id
				city_id:'',
				area_id:'',
				province_name:'',//省名称
				city_name:'',
				area_name:'',
				defaultAddress: false, //默认地址开关
				info:{},
				labelsList: [{
					id: 0,
					name: '家'
				}, {
					id: 1,
					name: '公司'
				}, {
					id: 2,
					name: '学校'
				}, ],
			}
		},
		onLoad(e) {
			console.log(e);
			if(e.state == 'modify'){
				this.info = uni.getStorageSync("addressInfo")
				this.id = this.info.id
				this.name = this.info.name
				this.phone = this.info.phone
				this.detailed = this.info.address
				
				this.province_name = this.info.province
				this.city_name = this.info.city
				this.area_name = this.info.area
				this.province_id = this.info.province_id
				this.city_id = this.info.city_id
				this.area_id = this.info.area_id
				this.defaultAddress = this.info.is_default? true: false,
				this.lableId = this.info.label_type
			
				this.addressAll = this.info.province + this.info.city + this.info.area
			}
		
		},
		methods: {
			//打开地址选择器
			openAddress() {
				// console.log(this.$refs.scroll.)
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				this.addressAll = ''
				let value = e.value;
				this.province_id = e.value[0].id
				this.city_id = e.value[1].id
				this.area_id = e.value[2].id
				
				this.province_name = e.value[0].name
				this.city_name = e.value[1].name
				this.area_name = e.value[2].name
				
				for (let i = 0; i < value.length; i++) {
					if (this.addressAll != value[i].name) {
						if (value[i].name != '县') {
							this.addressAll += value[i].name
						}
					}
				}
				console.log(this.addressAll);
			},

			// 标签
			changeLableId(item) {
				this.lableId = item.id
			},
			// 滑快
			openChange(e) {
				console.log('change', e);
			},
			// 规则校验
			ruleValidation() {
				let that = this;
				let {
					name,
					phone,
					detailed,
					area_name
				} = that;
			
				if (uni.$u.test.isEmpty(name)) {
					uni.$u.toast('请输入收货人姓名');
					return;
				}
				if (!uni.$u.test.mobile(phone)) {
					uni.$u.toast('请输入您的手机号');
					return;
				}
				if (uni.$u.test.isEmpty(area_name)) {
					uni.$u.toast('请选择省市区');
					return;
				}
				if (uni.$u.test.isEmpty(detailed)) {
					uni.$u.toast('请输入详细地址');
					return;
				}
				this.ruleState = true
			},
			// 保存
			isComplete() {
				this.ruleValidation()
				if (!this.ruleState) return;
				let data = {
					id: this.id,
					name: this.name,
					phone: this.phone,
					province_id: this.province_id,
					province_name: this.province_name,
					city_id: this.city_id,
					city_name: this.city_name,
					area_id: this.area_id,
					area_name: this.area_name,
					address: this.detailed,
					is_default: this.defaultAddress?1:0,
					label_type: this.lableId,
				}
				saveAddress(data).then(res => {
					console.log(res);
					if(res.code == 1){
						uni.$u.toast(res.msg);
						setTimeout(function() {
							uni.navigateBack({
								delta:1
							})
						}, 1500);
					}
				})
			},
		}
	}
</script>
<style scoped>
	.user_address {
		width: 690rpx;
		margin: 0 auto;
		background: #F2F2F2;
		border-radius: 12rpx;
	}

	.address_box {
		width: 92%;
		margin: 0 auto;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
	}

	.lineb {
		border-bottom: 1rpx solid #E5E5E5;
	}

	.address_box>text {
		width: 180rpx;
		font-size: 32rpx;
		color: #333333;
		padding: 10rpx 0;
	}

	.address_box>input {
		width: 510rpx;
		padding: 10rpx 0;
		color: #333333;
	}

	.ssq {
		width: 510rpx;
	}

	.user_detail {
		width: 690rpx;
		margin: 30rpx auto;
		background: #F2F2F2;
		border-radius: 12rpx;
	}

	.labels {
		flex: 1;
		/* background: pink; */
	}

	.labels>text {
		padding: 6rpx 24rpx;
		border-radius: 26rpx;
		border: 1rpx solid #CCCCCC;
		font-size: 26rpx;
		color: #3333333;
		margin-right: 16rpx;
	}

	.user_detail_l {
		width: 92%;
		margin: 0 auto;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
	}

	.user_detail_l>text {
		width: 150rpx;
		font-size: 32rpx;
		color: #333333;
		padding: 10rpx 0;
	}

	.defaults {
		padding: 30rpx 32rpx;
	}

	.defaults_box>text {
		margin-top: 6rpx;
	}

	.active1 {
		background: #A68A64 !important;
		color: #ffffff !important;
		border: 1rpx solid #A68A64 !important;
	}

	.btns {
		width: 690rpx;
		margin: 50rpx auto 0;
	}

	.btns>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.delete {
		width: 690rpx;
		margin: 30rpx auto 0;
	}

	.delete>text {
		text-align: center;
		width: 100%;
		border: 1rpx solid #ff4040;
		color: #ff4040;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	/deep/.u-textarea {
		background: none !important;
		border: 1rpx solid #3d3954 !important;
	}

	/deep/.u-textarea__count {
		background: none !important;
	}
</style>